<template>
    <a-layout class="roleManageRoot">

        <a-layout-content style="display: flex;flex-direction: column">

            <PageHeader>
                <a-button v-has-permission="'role:add'" type="primary" @click="()=>{this.addVisible = true}">
                    添加角色
                </a-button>
            </PageHeader>
            <!--<div style="background: #fff;margin-top: 1px;padding-left: 18px;padding-right: 18px; height: 50px;display: flex;align-items: center">-->
                <!--<h2 style="flex: 1">角色管理</h2>-->
                <!--<a-button v-has-button-permission="'role:add'" type="primary" @click="()=>{this.addVisible = true}">-->
                    <!--添加角色-->
                <!--</a-button>-->
            <!--</div>-->

            <div ref="tableWrapper"  style="flex: 1;overflow-y: auto">

            <a-table
                    :pagination="false"
                    :scroll="{ y : (this.$refs.tableWrapper ? this.$refs.tableWrapper.offsetHeight - 120:0  ) }"
                    rowKey="roleId" :columns="columns" :dataSource="tableData"  >


                <span slot="roleId" slot-scope="text, record" class="oper">
                    <a-icon type="edit" title="编辑" theme="twoTone" v-has-permission="'role:edit'"
                            @click="()=>{curEditRoleId = text;editVisible = true}"/>
                    <a-icon type="eye" title="查看权限"  theme="twoTone" v-has-permission="'role:ptree'"
                            @click="curEditRoleId = text;permissionVisible=true"/>

                    <a-popconfirm title="确认删除此角色吗" v-has-permission="'role:delete'" @confirm="deleteRole(text)"
                                  okText="确认" cancelText="取消">
                        <a-icon type="delete"  theme="twoTone"  twoToneColor="#f50" title="删除"/>
                    </a-popconfirm>
                </span>

            </a-table>
            </div>

            <a-modal
                    title="添加角色"
                    v-model="addVisible"
                    @ok="()=>{this.$refs.addRole.submitData()}"
            >
                <RoleAdd ref="addRole" @ok="()=>{this.addVisible =false;this.loadRoles()}"></RoleAdd>
            </a-modal>

            <a-modal
                    title="编辑角色"
                    v-model="editVisible"
                    @ok="()=>{this.$refs.editRole.submitData()}"
            >
                <RoleEdit v-model="curEditRoleId" ref="editRole"
                          @ok="()=>{this.editVisible =false;this.loadRoles()}"></RoleEdit>
            </a-modal>

            <a-drawer
                    :maskClosable="true"
                    placement="right"
                    title="角色权限编辑"
                    @close="permissionVisible=false"
                    :visible="permissionVisible"
                    @ok="()=>{this.$refs.editPer.submitData()}"
            >
                <PermissionEdit v-model="curEditRoleId" ref="editPer"
                                @ok="()=>{this.permissionVisible =false;}"></PermissionEdit>



                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.editPer.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>

        </a-layout-content>


    </a-layout>


</template>

<script>

    import RoleAdd from './RoleAdd'
    import RoleEdit from './RoleEdit'
    import PermissionEdit from './RolePermissionEdit'
    import {
        Layout,
        Form, DatePicker,Input,Button,Icon,Radio,TreeSelect,
        Modal,
        Pagination,
        Popconfirm,
        Table,
        Drawer,message

    } from 'ant-design-vue';

    export default {
        name: "RoleManage",
        components: {
            AModal:Modal,
            RoleAdd,
            RoleEdit,
            PermissionEdit,
            ALayout:Layout,
            ALayoutSider:Layout.Sider,
            ALayoutContent:Layout.Content,
            ALayoutHeader:Layout.Header,
            APagination:Pagination,
            ARadioButton:Radio.Button,
            ARadioGroup:Radio.Group,
            AFormItem:Form.Item,
            AForm:Form,
            ADatePicker:DatePicker,
            AInput:Input,
            AButton:Button,
            AIcon:Icon,
            ATreeSelect:TreeSelect,
            APopconfirm:Popconfirm,
            ATable:Table,
            ADrawer:Drawer
        },
        data() {
            return {
                addVisible: false,
                editVisible: false,
                permissionVisible: false,
                curEditRoleId: '',
                routes: [],
                columns: [{
                    title: '角色名称',
                    dataIndex: 'roleName',
                    width: '30%'
                },
                    {
                        title: '角色描述',
                        dataIndex: 'roleDesc',
                        width: '30%'
                    },
                    {
                        title: '操作',
                        dataIndex: 'roleId',
                        scopedSlots: {customRender: 'roleId'}
                    }
                ],
                tableData: []
            };
        },
        mounted() {
            this.loadRoles();
        },
        methods: {

            loadRoles() {
                this.$axios.get("/auth/role/getRoleList")
                    .then(d => {
                        if (d.data.status == 0) {

                            this.tableData = d.data.data;
                        }

                    })
                    .catch(e => {

                    })
            },
            deleteRole(roleId) {

                this.$axios.delete("/auth/role/deleteRole?roleId=" + roleId)
                    .then(d => {
                        if (d.data.status == 0) {
                            message.success("删除成功");
                            this.loadRoles();
                        } else {
                            message.error(d.data.message);
                        }
                    })
                    .catch(e => {
                        message.error("删除失败,未知错误");
                    })
            }

        }
    }
</script>

<style scoped>
    .roleManageRoot {
    }

    .oper >>> .anticon {

        margin-right: 16px;
        font-size: 20px;
        cursor: pointer;
    }
    .drawerBottomWrapper{
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius:0 0 4px 4px;
    }

    >>>.ant-table-header{
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
        overflow: hidden !important;
    }
    >>>.ant-table-body{
        overflow-y: auto !important;
    }


</style>